---
import LayoutBase from '@/layouts/layout-base.astro'
import { Icon } from 'astro-icon/components'
---

<LayoutBase title="首页" description="wudandong | 首页" gradientHeader>
  <div class="relative">
    <!-- 背景视频 -->
    <video
      id="homeVideo"
      class="w-dvw h-dvh object-cover"
      muted
      loop
      playsinline
      autoplay></video>
    <!-- slogin -->
    <div class="slogin-box">
      <div id="sloginContent" class="pointer-events-none"></div>
      <div
        class="relative top-[] left-1 sm:-top-1 sm:left-0 animate__animated animate__flash animate__infinite animate__slow"
      >
        _
      </div>
      <!-- 按钮 -->
      <div class="btn-box absolute -bottom-20 left-0 cursor-pointer">
        <a href="/article/工具/1-系统常用命令" class="btn btn-primary rounded-full text-xl flex items-center px-8 py-2">笔记 <Icon class="text-2xl" name="mdi:arrow-right-thin"></Icon></a>
      </div>
    </div>
    <!-- 声音开关 -->
    <div id="soundSwitch" class="sound-box">
      <Icon id="soundVolume" style="display: none;" name="mdi:volume" />
      <Icon id="soundVolumeOff" name="mdi:volume-off" />
    </div>
  </div>
</LayoutBase>

<script>
  const soundSwitch = document.getElementById('soundSwitch')
  const soundVolume = document.getElementById('soundVolume')
  const soundVolumeOff = document.getElementById('soundVolumeOff')
  const homeVideo: any = document.getElementById('homeVideo')

  let isPlaying = true
  if (homeVideo) {
    homeVideo.src = window.config.homeVideo // 设置视频地址
    // 点击遮罩层暂停/恢复视频播放
    homeVideo.addEventListener('click', (e: any) => {
      e.stopPropagation()
      if (isPlaying) {
        homeVideo.pause()
        isPlaying = false
      } else {
        homeVideo.play()
        isPlaying = true
      }
      // 暂停/恢复声音按钮动画
      if (soundSwitch) {
        soundSwitch.style.animationPlayState = isPlaying ? 'running' : 'paused'
      }
    })
  }

  if (soundSwitch && homeVideo) {
    soundSwitch.addEventListener('click', () => {
      if (homeVideo.muted) {
        homeVideo.muted = false
      } else {
        homeVideo.muted = true
      }
      if (soundVolume && soundVolumeOff) {
        soundVolume.style.display = homeVideo.muted ? 'none' : 'block'
        soundVolumeOff.style.display = homeVideo.muted ? 'block' : 'none'
      }
    })
  }

  // 解决微信浏览器不显示视频的问题
  function onBridgeReady() {
    document.addEventListener(
      'WeixinJSBridgeReady',
      function () {
        window.WeixinJSBridge.invoke('getNetworkType', {}, () => {
          if (homeVideo) homeVideo.play()
        })
      },
      false,
    )
  }
  onBridgeReady()

  // sloginContent 逐字出现
  const sloginContent = document.getElementById('sloginContent')
  if (sloginContent) {
    const sloginText = '不忘初心，砥砺前行'
    sloginContent.innerText = ''
    for (let i = 0; i < sloginText.length; i++) {
      setTimeout(() => {
        sloginContent.innerText += sloginText[i]
      }, i * 300)
    }
  }
</script>

<style lang="scss">
  .slogin-box {
    font-family: 'WenQuanYiBitmapSong', sans-serif;
    transform: translateY(-50%);
    white-space: nowrap;
    @apply tracking-widest text-white flex items-center absolute top-[50%] left-[20%] font-bold text-6xl sm:left-[10%] md:text-8xl mix-blend-difference;
    .btn-box{
      font-family: sans-serif;
      @apply tracking-normal;
    }
  }
  @media screen and (max-width: 640px) {
    .slogin-box {
      writing-mode: vertical-rl;
    }
  }
  @keyframes soundRotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .sound-box {
    animation: soundRotate 12s linear infinite;
    @apply fixed bottom-10 right-10 sm:bottom-20 sm:right-20 text-3xl p-2 border rounded-full text-white;
  }
</style>
